<template>
    <div class="e-form">
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <el-form ref="form" :model="formData" label-width="200px" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设备类别：" prop='categoryName'>
                            <el-input v-model="formData.categoryName" readonly>
                                <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectEquip"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="每公里/小数数量：" prop="quantityValue">
                            <el-input placeholder="请输入内容" v-model="formData.quantityValue"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="保养周期：" prop="maintenanceCycle">
                            <el-select
                                v-model="formData.maintenanceCycle"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="(
                                        item, index
                                    ) in maintenanceCycle"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用：" prop="isEnable">
                            <el-checkbox v-model="formData.isEnable"></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                            <span>{{ formData.orgName }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                size="small"
                class="btn-blue"
                @click="preserve"
                v-debounce='3000'
                >保存</el-button
            >
            <el-button size="small" @click="handleClose"  v-debounce='3000'>取消</el-button>
        </div>
    </div>
</template>

<script>
import request from '@/api/equip/equipPlan.js'
import { mapState } from 'vuex'
//import { selectEquipmentBase } from '@/api/equip/popupCallback.js'
import { selectDataClient } from '@/utils/common'
export default {
    data () {
        return {
            formData: {
                'auditTime': '',
                'auditor': '',
                'auditorId': '',
                'billId': '',
                'categoryId': '',
                'categoryName': '',
                'founderId': '',
                'founderName': '',
                'isEnable': true,
                'maintenanceCycle': '',
                'modifier': '',
                'modifierId': '',
                'oneLevelCategoryId': '',
                'oneLevelCategoryName': '',
                'orgId': '',
                'orgName': '',
                'quantityValue': null,
                'recorder': '',
                'recorderId': '',
                'state': 0,
                'workId': ''
            },
            billid: this.$route.query.billid,
            isEdit: false, //是否编辑
            rules: {
                categoryName: [
                    { required: true, message: '请选择设备类别', trigger: ['blur', 'change'] },
                ],
                quantityValue: [
                    { required: false, message: '请填写每公里数/小时数', validator: (rule, value, callback)=>{
                        if(this.formData.quantityValue == 0) {
                            callback(new Error('请填写正数！'))
                        }
                        else {
                            callback()
                        }
                    }, trigger: ['blur', 'change']  },
                ],
                maintenanceCycle: [
                    { required: false, message: '请选择保养周期', trigger: ['blur', 'change'] },
                ],
                isEnable: [
                    { required: true, message: '请选择是否启用', trigger: ['blur', 'change'] },
                ],
            },
        }
    },
    components: {
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            maintenanceCycle: state=>state.equip.equipData.maintenanceCycle,
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return (obj ?  obj.label :  '')
            }
        },
    },
    created () {
        if(this.$route.query.billid) {
            this.billid = this.$route.query.billid
            this.getInfo()
        }
    },
    mounted () {
        this.formData.orgName = this.userInfo.orgInfo.orgName
        this.formData.orgId = this.userInfo.orgInfo.orgId
    },
    methods: {
        //选择设备基础库
        selectEquip () {
            let json = {
                'categoryId': '00000',
                'isUpdate': false,
                'keyword': ''
            }
            selectDataClient({
                SelectServiceToken: '/facilitybase/equipment/getEquipmentCategoryAll', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id
                InitParamsStr: JSON.stringify(json),    // 接口参数
                Title: '设备基础库' // 标题
            }).then(res=>{
                res.forEach(item=>{
                    this.formData.categoryName = item.categoryName
                })
            })
        },
        //获取基本信息
        getInfo () {
            request.maintenancePlanInfo( { id: this.billid } ).then(res=>{
                res.isEnable = JSON.parse(res.isEnable)
                this.formData = res

            })
        },
        //保存
        preserve () {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if(!this.formData.quantityValue && !this.formData.maintenanceCycle) {
                        this.clientPop('err', '每公里数/小时数和保养周期至少填写一个！')
                        return
                    }
                    this.isEdit = this.billid ? true : false
                    if(this.isEdit) {
                        request.updateMaintenancePlan(this.formData).then(()=>{
                            this.clientPop('suc', '保存成功!', this.handleClose)
                        })
                    }else{
                        request.maintenancePlanAdd(this.formData).then(()=>{
                            this.clientPop('suc', '保存成功!', this.handleClose)
                        })
                    }
                } else {
                    return false
                }
            })
        },
        //取消
        handleClose () {
            this.$router.replace('/maintenancePlanList')
        },
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
</style>
